<template>
	<view class="p-20 rounded-lg live_box bg-white p-20 mb-30" @click="anchorIndex(val)">
		<view class="flex mb-20">
			<view class="w-160 h-160 border-2 border-solid border-[#BADEFF] rounded-lg overflow-hidden">
				<ImageBoxVue :src="val.headimg" width="158rpx" height="158rpx"></ImageBoxVue>
			</view>
			<view class="flex-1 ml-20">
				<view class="flex justify-between items-center mb-10">
					<text class="font-bold">{{val.name}}</text>
					<view class="flex items-center">
						<ImageBoxVue src="/static/icons/red.png" width="28rpx" height="29rpx"></ImageBoxVue>
						<text class="ml-10 text-[#666666]">{{val.privoired}}钻/分钟</text>
					</view>
				</view>
				<view class="mb-10">
					<text class="text-[#666666]">从业 <text class="font-bold">{{val.workyear}}年</text></text>
					<text>丨</text>
					<text class="text-[#666666]">好评率 <text class="font-bold">{{val.goodcomm}}%</text></text>
				</view>
				<view class="flex items-center mb-10">
					<text class="text-[#666666]">技能：</text>
					<view class="bg-[#EFF4F6] text-[#7A8894] rounded mr-10 px-10" v-for="(it, idx) in val.joblist"
						:key="idx">
						{{jobStr(it.jobtp)}}
					</view>
				</view>
				<view class="flex items-center mb-10" v-if="val.tiplist?.length > 0">
					<text class="text-[#666666]">擅长：</text>
					<view class="px-10 rounded mr-10" v-for="(e,i) in val.tiplist" :key="i"
						:style="{background:e.backcolor}">
						<text class="" :style="{color:e.fontcolor}">{{e.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="mb-20">
			<text class="text-[#666666]">{{val.troduction}}</text>
		</view>
		<view class="flex">
			<view class="flex-1 flex justify-center items-center rounded-full bg-[#DEEFFF] py-10 mr-20"
				@click.stop="sendMsg">
				<text class="text-[#329EFF] text-sm">私聊咨询</text>
			</view>
			<view class="flex-1 flex justify-center items-center rounded-full bg-[#329EFF] py-20"
				@click.stop="onPrivateChat(val)">
				<text class="text-white text-sm">通话咨询</text>
			</view>
		</view>
	</view>
	<PlayPhoneVue ref="PlayPhoneVueRef"></PlayPhoneVue>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import liveApi from '../../../apis/apiList/liveApi'
	import PlayPhoneVue from '@/components/PlayPhone.vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	const PlayPhoneVueRef = ref()
	const {
		val,
	} = defineProps(['val'])
	// console.log(val)
	const onPath = (id) => {
		uni.navigateTo({
			url: "/pages/live/liveRoom?id=" + id
		})
	}
	// 职业类型 0无，1心理 2星图 3卡牌 4咨询
	const jobStr = (val) => {
		if (val == 0) {
			return '无'
		} else if (val == 1) {
			return '心理'
		} else if (val == 2) {
			return '星图'
		} else if (val == 3) {
			return '卡牌'
		} else if (val == 4) {
			return '咨询'
		} else {
			return ''
		}
	}
	const anchorIndex = (item) => {
		const id = uni.getStorageSync('user').id
		const userid = item.member.id
		// console.log(id, userid)
		if (id != userid) {
			uni.navigateTo({
				url: `/pages/user/anchor?id=${item.id}`
			})
		}
	}
	const onPrivateChat = async (val) => {
		// const user = uni.getStorageSync('user')
		// uni.navigateTo({
		// 	url: `/pages/live/liveRoom?id=${1349493678489468928}`
		// })
		// return
		// uni.redirectTo({
		// 	url: `/pages/views/makePhone?type=receive&fromAccount=${user.id}&info=${JSON.stringify({name:user.name,headimg:user.headimg})}`
		// })
		// return
		// uni.navigateTo({
		// 	url: `/pages/msg/privateChat?anchorId=${val.member.id}&id=${user.id}`
		// 	// url: `/pages/msg/privateChat?anchorId=${user.id}&id=${val.member.id}`
		// })
		// return
		const info = {
			fromAccount: val.member.id,
			name: val.name,
			headimg: val.headimg
		}
		PlayPhoneVueRef.value.show(true, info)

	}
	// 私聊
	const sendMsg = () => {
		uni.navigateTo({
			url: `/pages/msg/chatRoom?fromAccount=${val.id}&nickname=${val.name}&headimg=${val.headimg}`
		})

	}
</script>

<style lang="less">
	.live_box {
		box-shadow: 0px 4px 4px 0px rgba(168, 198, 215, 0.25);
	}
</style>